
import { Button, Drawer, Form, Space } from 'antd'
import React, { FC, useState } from 'react'
import StypeTwo from './com/stype2'
import StypeOne from './com/stype1'
import Store from './com/store'
const Home: FC = (props) => {
  const [open, setOpen] = useState<boolean>(false)
  const [form] = Form.useForm()
  const { upload, setUpload, data, setData, onNext } = Store.useContainer()
  const handleClose = () => {
    setOpen(false)
  }
  const handleNext = () => {
    onNext(form)
  }

  const Footer = upload ? (
    <Space></Space>
  ) : (
    <Space>
      <Button>取消</Button>
      {
        data.importType === 'file' ?
          (<Button type="primary" onClick={handleNext}>下一步</Button>)
          :
          (<Button type="primary">创建</Button>)
      }
    </Space>
  )
  return (
    <>
      <Button type='primary' onClick={() => { setOpen(true) }}>上传小说</Button>
      <Drawer title="上传" placement='right' open={open} onClose={() => { handleClose() }} footer={Footer}>
        <Form form={form}>
          {
            upload ? <StypeTwo /> : <StypeOne />
          }
        </Form>

      </Drawer>
    </>)
}

export default () => (
  <Store.Provider>
    <Home></Home>
  </Store.Provider>
)